<template>
  <div class="user_webapp_container">
    <div class="login">
      <h1>知识渔社区</h1>
      <!-- 密码登录 -->
      <div class="login_container">
        <div class="login_item">
          <div class="login_item_start">
            <div class="login_item_start_name">
              <span>用</span>
              <span>户</span>
              <span>名</span>
            </div>
            <div class="login_item_start_gang"></div>
          </div>
          <div class="login_item_end">
            <input
              type="text"
              v-model="login.nickname"
              placeholder="请输入用户名或邮箱"
            />
          </div>
        </div>
        <div class="login_item">
          <div class="login_item_start">
            <div class="login_item_start_name">
              <span>密</span>
              <span>码</span>
            </div>
            <div class="login_item_start_gang"></div>
          </div>
          <div class="login_item_end">
            <input
              type="password"
              v-model="login.password"
              placeholder="6-20位字母数字组合"
            />
          </div>
        </div>
      </div>
      <!-- 操作按钮 -->
      <div class="login_tools">
        <div class="login_tools_name">
          <span>忘记密码？</span>
          <span>验证码登录</span>
        </div>
        <div class="login_tools_button">
          <button
            class="login_tools_btn"
            @click="register"
            :style="registerBtn ? 'background: #33d0b9;' : ''"
          >
            登录
          </button>
        </div>
        <div
          class="login_tools_title"
          @click="$router.replace('/user/mobileRegister')"
        >
          没有账号？去注册
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="webapp_footer">
      <!-- 用户协议请求 -->
      <div class="tcp_box">
        <input type="checkbox" name="" id="tcp" v-model="tcp" />
        <div class="tcp">
          我已阅读并同意<a href="javascript:;">《知识渔用户协议》</a>和<a
            href="javascript:;"
            >《隐私协议》</a
          >
        </div>
      </div>
      <span>如遇登录问题请加官方 QQ 群 247275373</span>
    </div>
  </div>
</template>

<script>
import { throttle } from "lodash";
import { mapState } from "vuex";

export default {
  name: "MobileLogin",
  computed: {
    ...mapState("user", ["aimUserInfo", "userInfo"]),
  },
  data() {
    return {
      // 是否高亮注册按钮
      registerBtn: false,
      // 阅读同意
      tcp: false,
      toggle: {
        // false邮箱用户名密码 | true邮箱验证
        login_method: false,
      },
      // 登录数据
      login: {
        nickname: "坤坤基尼太美",
        email: "",
        code: "",
        password: "wang1452+++",
      },
    };
  },
  watch: {
    login: {
      deep: true,
      handler() {
        let { nickname, email, code, password } = this.login;
        if (this.login_method) {
          if (email && code) {
            this.registerBtn = true;
          } else {
            this.registerBtn = false;
          }
        } else {
          // 用户名密码
          if (nickname && password) {
            this.registerBtn = true;
          } else {
            this.registerBtn = false;
          }
        }
      },
    },
  },
  methods: {
    // 发送验证码，节流处理
    sendEmailCode: throttle(function () {
      // 发送了验证码后不能继续发送
      if (this.toggle.sendCode) return;
      // 发送验证码
      this.$api.sendCode(this.ruleForm.email).then((res) => {
        if (res.code === 200) {
          this.toggle.sendCode = true;
          // 开启定时器
          this.toggle.timer = setInterval(() => {
            this.toggle.time--;
            if (this.toggle.time <= 0) {
              clearInterval(this.toggle.timer);
              this.toggle.sendCode = false;
              this.toggle.time = 59;
            }
          }, 1000);
        }
      });
    }, 2000),
    // 开始登录验证
    register: throttle(function () {
      this.sendLoginRequest();
    }, 2000),
    // 根据不同登录方式，发送不同登录请求
    async sendLoginRequest() {
      const jwt = this.toggle.login_method;
      // 判断登录方式     false邮箱用户名密码 | true邮箱验证
      if (jwt) {
        // 邮箱验证登录
        const { email, code } = this.login;
        // 邮箱用户名密码
        const options = {
          email: email.trim(),
          code: code.trim(),
          loginType: "email",
        };
        // 发送请求
        this.$store.dispatch("user/Login", options).then((res) => {
          if (res?.code === 200) {
            this.$win("登录成功");
            this.$router.replace("/community/article");
          }
        });
      } else {
        // 邮箱用户名密码登录
        const { nickname, password } = this.login;
        const options = {
          password: password.trim(),
        };
        if (nickname.trim().indexOf("@") === -1) {
          options["userName"] = nickname.trim();
        } else {
          options["email"] = nickname.trim();
        }
        options.loginType = "account";
        // 发送请求
        this.$store.dispatch("user/Login", options).then((res) => {
          if (res?.code === 200) {
            this.$win("登录成功");
            this.$router.replace("/community/article");
          }
        });
      }
    },
    // 切换登录方式
    toggleLoginMethod() {
      // 清空验证文本内容
      if (this.toggle.login_method) {
        this.ruleForm.email = "";
        this.ruleForm.code = "";
        this.$refs["nickname"].classList.remove("letter_active");
        this.$refs["password"].classList.remove("letter_active");
        // 清空表单错误信息
        this.$refs.emailLoginForm.resetFields();
      } else {
        this.ruleForm.nickname = "";
        this.ruleForm.password = "";
        this.$refs["email"].classList.remove("letter_active");
        this.$refs["code"].classList.remove("letter_active");
        // 清空表单错误信息
        this.$refs.loginForm.resetFields();
      }
      this.toggle.login_method = !this.toggle.login_method;
    },
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 350px) {
  .user_webapp_container {
    .login {
      padding: 80px 40px 0 40px !important;
    }
  }
}
.user_webapp_container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .login_tools_btn {
    transition: background 0.6s;
  }
  .login {
    text-align: left;
    padding: 50px 20px 0 20px;
    h1 {
      margin-bottom: 50px;
    }
    .login_container {
      font-family: "微软雅黑";
      .login_item {
        display: flex;
        border-bottom: var(--main-border-bottom);
        padding-bottom: 12px;
        margin-top: 20px;
        .login_item_start {
          display: flex;
          position: relative;
          .login_item_start_name {
            display: flex;
            width: 48px;
            justify-content: space-between;
            color: #585858;
          }
          .login_item_start_gang {
            width: 2px;
            height: 8px;
            background: #c7c7c7;
            position: absolute;
            /* 水平垂直居中 */
            position: absolute;
            right: -11px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .login_item_end {
          flex: auto;
          margin-left: 18px;
          input {
            color: #232323;
            border: 0;
            width: 100%;
            background: transparent;
            outline: none;
            margin-top: -4px;
            padding-left: 8px;
            &::-webkit-input-placeholder {
              font-size: 14px;
              color: #ccc;
            }
          }
        }
      }
    }
    .login_tools {
      padding-top: 20px;
      .login_tools_name {
        display: flex;
        justify-content: flex-end;
        span {
          font-size: 14px;
          &:nth-of-type(1) {
            color: #ccc;
          }
          &:nth-of-type(2) {
            margin-left: 14px;
            color: var(--a-button-hover-color);
          }
        }
      }
      .login_tools_button {
        width: 100%;
        margin-top: 20px;
        button {
          border: 0;
          width: 100%;
          height: 40px;
          color: #fff;
          border-radius: 20px;
          background: #97cec6;
        }
      }
      .login_tools_title {
        text-align: center;
        margin-top: 20px;
        color: var(--a-button-hover-color);
      }
    }
  }
  .webapp_footer {
    font-size: 13px;
    margin-bottom: 10px;
    span {
      color: #b3b3b3;
      font-size: 12px;
    }
    .tcp_box {
      display: flex;
      margin-bottom: 4px;
      justify-content: center;
      align-items: center;
      .tcp {
        margin-left: 4px;
        color: #999;
        a {
          color: var(--a-button-hover-color);
        }
      }
    }
  }
}
</style>